import { useAppDispatch } from '@/hooks'
import { RootState } from '@/store'
import { fetchUserInfo, setUserName } from '@/store/modules/reduxUser'
import { useUserStore } from '@/store/modules/user'
import { Button, Card, Col, Row, message } from 'antd'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'

export default function StorePage() {
  const userStore = useUserStore()
  const zlogin = () => {
    userStore.setUserName('张三')
    message.success('登录成功')
  }
  const zlyout = () => {
    userStore.setUserName('')
    message.success('登出成功')
  }
  const zfetch = () => {
    userStore.api_UserInfo({})
    message.success('异步')
  }

  const ruserStore = useSelector((state: RootState) => state.userStore)
  const dispatch = useDispatch()
  const appDispatch = useAppDispatch()
  const rlogin = () => {
    appDispatch(setUserName('张三'))
    message.success('登录成功')
  }
  const rlyout = () => {
    appDispatch(setUserName(''))
    message.success('登出成功')
  }
  const rfetch = () => {
    dispatch(fetchUserInfo({ name: '123' }))
    message.success('异步')
  }
  return (
    <div>
      <Row gutter={20}>
        <Col span={8}>
          <Card title="zustand">
            <div>
              <Button onClick={zlogin}>登录</Button>
              <Button className="mx-10px" onClick={zlyout}>
                登出
              </Button>
              <Button onClick={zfetch}>异步请求</Button>
            </div>
            <div>{userStore.name}</div>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="@reduxjs/toolkit">
            <div>
              <Button onClick={rlogin}>登录</Button>
              <Button className="mx-10px" onClick={rlyout}>
                登出
              </Button>
              <Button onClick={rfetch}>异步请求</Button>
            </div>
            <div>{ruserStore.userName}</div>
          </Card>
        </Col>
      </Row>
    </div>
  )
}
